<template>
<!--    个人中心-->
    <div class="box">
        <h4>基本资料</h4>
        <div class="hr"></div>
        <div>
            <div style="width: 100px;height: 100px;margin-top: 20px">
                <img :src="picture" alt="" style="width: 100%;height: 100%">
            </div>
            <div style="overflow: hidden;margin-top: 10px;margin-left: 10px" v-if="!flag">
                <input type="file" enctype="multipart/form-data" ref="file" value=""/>
                <el-button type="primary" @click="tupian" size="mini">确定</el-button>
            </div>
            <div class="text">
                <div>学号：</div>
                <div>{{userlist.student_id}}</div>
            </div>
            <div class="text">
                <div>姓名：</div>
                <div>{{userlist.user_name}}</div>
            </div>
            <div class="text">
                <div>昵称：</div>
                <div v-if="flag">{{userlist.nickname}}</div>
                <div v-else>
                    <el-input
                            placeholder="请输入昵称"
                            prefix-icon="el-icon-user"
                            v-model="nickname"
                    >
                    </el-input>
                </div>
            </div>
            <div class="text">
                <div>性别：</div>
                <div v-if="flag">{{userlist.sex | issex}}</div>
                <div v-else>
                    <el-radio v-model="sex" label="0">女</el-radio>
                    <el-radio v-model="sex" label="1">男</el-radio>
                </div>
            </div>
            <div class="text">
                <div>个性签名：</div>
                <div v-if="flag">{{userlist.signature}}</div>
                <div v-else>
                    <el-input
                            placeholder="请输入个性签名"
                            prefix-icon="el-icon-edit"
                            v-model="signature"
                    >
                    </el-input>
                </div>

            </div>
            <div class="text">
                <div>专业：</div>
                <div>{{userlist.professional}}</div>
            </div>
            <div class="text">
                <div>手机号：</div>
                <div v-if="flag">{{userlist.phone}}</div>
                <div v-else>
                    <el-input
                            placeholder="请输入电话号"
                            prefix-icon="el-icon-phone-outline"
                            v-model="phone"
                    >
                    </el-input>
                </div>
            </div>
            <div class="text">
                <div>qq号：</div>
                <div v-if="flag">{{userlist.qq}}</div>
                <div v-else>
                    <el-input
                            placeholder="请输入qq号"
                            prefix-icon="el-icon-phone-outline"
                            v-model="qq"
                    >
                    </el-input>
                </div>
            </div>
            <div class="text">
                <div>地址：</div>
                <div v-if="flag">{{userlist.address}}</div>
                <div v-else>
                    <el-input
                            placeholder="请输入地址"
                            prefix-icon="el-icon-location-information"
                            v-model="address"
                    >
                    </el-input>
                </div>
            </div>
            <div class="text">
                <div>职位：</div>
                <div>{{userlist.type | type}}</div>
            </div>
        </div>
        <div style="overflow: hidden">
            <el-button type="text" class="xiugai" @click="xiugai" v-if="flag">修改</el-button>
            <div v-else class="xiugai">
                <el-button type="text" @click="quexiao" style="color: black;margin-right: 20px">取消</el-button>
                <el-button type="text" @click="queding">确定</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import {getuser, changeuser} from "../api/api";
    import $ from "jquery";

    export default {
        filters: {
            issex(value){
                if(value == 0){
                    return value = '女'
                }else {
                    return value = '男'
                }
            },
            type(value){
                if (value == 0){
                    return value = '学生'
                }else if(value == 1){
                    return value = '校团委'
                }else {
                    return value = '导助'
                }
            }
        },
        name: "mine",
        data(){
            return{
                userlist:'',
                sex:'',
                nickname:'',
                signature:'',
                phone:'',
                address:'',
                flag:true,
                picture:'',
                qq:''
            }
        },
        methods:{
            xiugai(){
                this.flag = false
            },
            quexiao(){
                this.flag = true
            },
            tupian(){
                var file = new FormData()
                file.append('img',this.$refs.file.files[0])
                $.ajax({
                    url:'http://127.0.0.1:3007/api/uploadImg',
                    type: 'post',
                    data:file,
                    contentType: false,
                    processData: false,
                    success:res=>{
                        // console.log(res)
                        if(res.code == 200){
                            this.picture = 'http://127.0.0.1:3007/uploads/'+res.data
                        }
                    }
                })
            },
            queding(){
                changeuser(this.nickname, this.picture, this.signature, Number(this.sex), this.address, this.phone, this.qq).then(res=>{
                    console.log(res)
                    if(res.status == 0){
                        this.$message({
                            showClose: true,
                            message: '修改成功',
                            type: 'success'
                        });
                        this.$router.go(0)
                    }
                })
            },
            get(){
                getuser().then(res=>{
                    // console.log(res)
                    if(res.status == 0){
                        this.userlist = res.data
                        this.sex = res.data.sex.toString()
                        this.nickname = res.data.nickname
                        this.signature = res.data.signature
                        this.phone = res.data.phone
                        this.address = res.data.address
                        this.picture = res.data.head_img
                        this.qq = res.data.qq
                    }
                })
            }

        },
        created() {
            this.get()
        }
    }
</script>

<style scoped>
    .box{
        background-color: white;
        padding: 30px;
        box-sizing: border-box;
    }
    .text {
        margin-top: 30px;
        display: flex;
        align-items: center;
    }
    .xiugai {
        float: right;
        margin-right: 10px;
        margin-top: 20px;
    }
    .hr {
        width: 100%;
        height: 1px;
        background-color: #c7e5eb;
        margin-top: 10px;
    }
</style>
